<template>
  <div class="container">
    <p class="teacher">教师列表</p>
    <el-table
      ref="multipleTable"
      :data="arr"
      tooltip-effect="dark"
      style="width: 100%"
      :default-sort="{prop:'payTime',order:'descending'}"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- <el-table-column prop="id" label="用户id" width="120"></el-table-column> -->
      <el-table-column prop="name" label="教师姓名" show-overflow-tooltip></el-table-column>
      <el-table-column prop="course" label="所教课程" show-overflow-tooltip></el-table-column>
      <el-table-column prop="price" label="价格" show-overflow-tooltip width="80"></el-table-column>
      <el-table-column prop="num" label="销量" show-overflow-tooltip width="80"></el-table-column>
      <el-table-column prop="person" label="上传人" show-overflow-tooltip></el-table-column>
      <el-table-column prop="uptime" label="上传时间" show-overflow-tooltip></el-table-column>
      <el-table-column fixed="right" label="禁用账户" width="100">
        <el-switch v-model="value" active-color="#ff4949" inactive-color="#ccc"></el-switch>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="info" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { deleteTeacherApi, batchDelApi } from "../../../api/teacherApi";
export default {
  props: ["arr"],
  data() {
    return {
      value: false,
      // tableData: [
      //   {
      //     id: 123,
      //     name: "王五",
      //     course: "幼儿英语入门教程",
      //     price: 100, //价格
      //     num: 20, //销量
      //     person: "json", //上传人
      //     uptime: "2018-08-08", //上传时间
      //   },
      // ],
      multipleSelection: [], //checkbox选中的数据
    };
  },
  methods: {
    bathDelFun() {
      this.$emit("parentbatch");
    },
    // 批量删除函数
    batchData() {
      console.log("调用到了");
      // 发送请求 传参
      var ids = "";
      this.multipleSelection.forEach((item) => {
        ids += item.id + ",";
      });
      batchDelApi({ ids: ids }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          // 刷新表格
          this.$emit("parentResetFun");
        }
      });
    },
    handleEdit(row) {
      console.log(row);
      this.$emit("parentidshowfun", row);
    },
    handleDelete(id) {
      // 发送请求
      deleteTeacherApi({ id: id }).then((res) => {
        if (res.code == 200) {
          console.log(res);
          // 刷新表格
          this.$emit("parentResetFun");
        }
      });
    },
    // toggleSelection(rows) {
    //   if (rows) {
    //     rows.forEach((row) => {
    //       this.$refs.multipleTable.toggleRowSelection(row);
    //     });
    //   } else {
    //     this.$refs.multipleTable.clearSelection();
    //   }
    // },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style>
.container .teacher {
  box-sizing: border-box;
  height: 52px;
  padding: 18px 30px;
  background-color: #fff;
  font-weight: 700;
}
</style>